<template>
    <div class="mine-info">
        <!-- 基本信息 -->
        <el-card class="mine-info-basic" shadow="hover">
            <div>
                <el-avatar class="mine-info-basic-avater" shape="square" :size="100" :src="url"></el-avatar>
            </div>
            <div class="mine-info-basic-text">
                <div class="mine-info-basic-text-name">{{userList.name}}</div>
                <div class="mine-info-basic-text-id">{{userList.id}}</div>
                <div class="mine-info-basic-text-other">
                    <div>
                        <p class="item-name">性别</p>
                        <p class="mine-info-basic-text-other-sex">{{userList.sex}}</p>

                    </div>
                    <div>
                        <p class="item-name">生日</p>
                        <p class="mine-info-basic-text-other-birth">{{userList.birth}}</p>

                    </div>
                    <div>
                        <p class="item-name">清柠天数</p>
                        <p class="mine-info-basic-text-other-day">{{userList.totalTime}}<span>day</span></p>


                    </div>
                </div>
            </div>

        </el-card>
        <!-- 修改信息按钮 -->
        <div class="mine-info-btn">
            <el-button plain size="medium">上传头像</el-button>
            <el-button plain size="medium" @click="dialogFormVisible = true">修改信息</el-button>
            <el-dialog title="修改个人信息" center :modal-append-to-body='false' :visible.sync="dialogFormVisible">
                <el-form :model="userList">
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                        <el-input v-model="userList.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="学号" :label-width="formLabelWidth">
                        <el-input v-model="userList.id" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="生日" :label-width="formLabelWidth">
                        <el-input v-model="userList.birth" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="学院" :label-width="formLabelWidth">
                        <el-input v-model="userList.institute" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="专业" :label-width="formLabelWidth">
                        <el-input v-model="userList.specialty" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="爱好" :label-width="formLabelWidth">
                        <el-input v-model="userList.hobby" autocomplete="off"></el-input>
                    </el-form-item>


                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateUserInfo">确 定</el-button>
                </div>
            </el-dialog>
        </div>

        <!-- 其他信息 -->
        <div class="mine-info-other">
            <h5 class="mine-info-other-title">其他信息</h5>
            <el-card class="mine-info-other-contain" shadow="hover">
                <div class="mine-info-other-contain-text">
                    <div class="mine-info-other-contain-text-hobby">
                        <p class="title">
                            爱好
                            <img src="../../../assets/mime/感兴趣.png" alt="">

                        </p>
                        <p>{{userList.hobby}}</p>
                    </div>
                    <div class="mine-info-other-contain-text-institute">
                        <p class="title">
                            学院
                            <img src="../../../assets/mime/院校.png" alt="">

                        </p>
                        <p>{{userList.institute}}</p>

                    </div>
                    <div class="mine-info-other-contain-text-specialty">
                        <p class="title">
                            专业
                            <img src="../../../assets/mime/专业.png" alt="">
                        </p>
                        <p>{{userList.specialty}}</p>

                    </div>

                </div>
                <div class="mine-info-other-contain-logo">

                </div>


            </el-card>
        </div>

    </div>

</template>

<script>
import {
    updateUserImg,
    updateUserProfile,
} from '../../../api/user';
export default {
    name: 'mineInfo',
    data() {
        return {
            url: 'https://img2.baidu.com/it/u=49689427,3992336403&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665075600&t=0c177d5bea997a7afce3acd1110ebdbf',
            dialogFormVisible: false,
            formLabelWidth: '120px',

            webSocketObject: null
        }
    },
    props: ['userList'],
    components: {
    },

    mounted() {
       

    },
    methods: {
        updateUserInfo() {
            const userInfo = {
                name: this.userList.name,
                institute: this.userList.institute,
                specialty: this.userList.specialty,
                birth: this.userList.birth,
                sex: this.userList.sex,
                hobby: this.userList.hobby,
            }
            updateUserProfile(userInfo).then((res) => {
                console.log(res);
            }).catch((err) => {
                console.log(err);
            });

            this.dialogFormVisible = false

        },
        webSocketInit() {
            console.log(this.userList.id)
            const webSocketUrl = 'ws://lemonstudy.natapp1.cc/api/websocket/'
            this.webSocketObject = new WebSocket(webSocketUrl);
            this.webSocketObject.onopen = this.webSocketOnOpen
            this.webSocketObject.onmessage = this.webSocketOnMessage
            this.webSocketObject.onerror = this.webSocketOnError
            this.webSocketObject.onclose = this.webSocketOnClose
            },
            webSocketOnOpen(e){
            console.log('与服务端连接打开->',e)
            },
            webSocketOnMessage(e){
            console.log('来自服务端的消息->',e)
            },
            webSocketOnError(e){
            console.log('与服务端连接异常->',e)
            },
            webSocketOnClose(e){
            console.log('与服务端连接关闭->',e)
            }

    }
}
</script>

<style scoped lang="less">
.mine-info {
    width: 30vw;

    &-basic {
        border-radius: 30px;
        background: rgba(229, 247, 190, 1);
        position: relative;
        overflow: visible;
        margin-top: 5vh;

        &-avater {
            position: absolute;
            width: 10vw;
            top: -15%;
            left: 50%;
            margin-left: -50px;
            border-radius: 50%;
            box-shadow: 0px 10px 24px NaNpx rgba(120, 146, 141, 0.5);
        }

        &-text {
            display: flex;
            margin-top: 10vh;
            flex-direction: column;
            align-items: center;

            &-name {
                font-size: 16px;
                font-weight: 900;
            }

            &-id {
                font-size: 14px;
                font-weight: 300;
                color: rgba(136, 140, 150, 1);
                margin-top: 1vh;
            }

            &-other {
                width: 100%;
                display: flex;



                &-sex {
                    font-size: 24px;
                    font-weight: 500;
                    letter-spacing: 0px;
                    line-height: 0px;
                    color: rgba(18, 26, 45, 1);
                    text-align: left;
                    vertical-align: top;
                }

                &-birth {
                    font-size: 14px;
                    font-weight: 500;
                    letter-spacing: 0px;
                    line-height: 0px;
                    color: rgba(18, 26, 45, 1);
                    text-align: left;
                    vertical-align: top;
                }

                &-day {
                    font-size: 24px;
                    font-weight: 500;
                    letter-spacing: 0px;
                    line-height: 0px;
                    color: rgba(165, 214, 63, 1);
                    text-align: left;
                    vertical-align: top;

                    span {
                        font-size: 14px;
                        font-weight: 500;
                        letter-spacing: 0px;
                        line-height: 0px;
                        color: rgba(165, 214, 63, 1);
                        text-align: left;
                        vertical-align: top;
                    }
                }

                div {
                    flex: 1;
                }

                p {
                    text-align: center;
                }

                .item-name {
                    font-size: 16px;
                    font-weight: 400;
                    color: rgba(8, 155, 171, 1);
                }

            }
        }

    }

    &-btn {
        width: 55%;
        margin: 3vh auto;
        display: flex;

        ::v-deep .el-dialog {
            width:80vh; 
            border-radius: 20px;
        }

        button {
            flex: 1;
            background-color: rgba(213, 237, 161, 1);
            color: rgba(7, 74, 69, 1);

            &:hover {
                color: #fff;
                background-color: rgba(0, 186, 173, 1);
            }
        }

    }

    &-other {
        &-title {
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0.45px;
            line-height: 0px;
            color: rgba(8, 155, 171, 1);
            text-align: left;
            vertical-align: top;
        }

        p {
            font-size: 16px;
            font-weight: 400;
            color: rgba(18, 26, 45, 1);

        }

        .title {
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0.45px;
            line-height: 0px;
            color: rgba(8, 155, 171, 1);
            text-align: left;
            vertical-align: top;

            img {
                width: 1.2vw;
                vertical-align: middle;
            }
        }

        &-contain {
            border-radius: 10%;
            background: rgba(229, 247, 190, 1);

            &-text {
                width: 10vw;
                float: left;

                &-title {
                    font-size: 18px;
                    font-weight: 400;
                    letter-spacing: 0px;
                    line-height: 0px;
                    color: rgba(0, 186, 173, 1);
                    text-align: left;
                    vertical-align: top;
                }
            }

            &-logo {
                float: right;
                width: 15vw;
                height: 25vh;
                background: url('../../../assets/mime/image.png.png');
                background-size: contain;
                background-repeat: no-repeat;
            }
        }


    }

}
</style>
